<script setup lang="ts">
import {Delete} from "@element-plus/icons-vue"
import {ref} from "vue";
import {banLiveRoom, liftBanLiveRoom} from "@/service/api";
import UpdateLiveRoom from "@/views/home/liveRoom/components/updateLiveRoom.vue";


const props = defineProps({
  item: Object,
  deleteItem: Function,
})

const roomItem: any = ref(props.item);
const boo = ref<number>(roomItem.value.status);
const changeStatus = async (item: any, status: number) => {
  if (status == 0) {
    await liftBanLiveRoom({
      liveRoomId: item.id
    })
  } else if (status == 1) {
    await banLiveRoom({
      liveRoomId: item.id
    })
  }
}

</script>

<template>
  <div class="live-room-item">
    <div class="room-img">
      <el-image fit="cover" :src="roomItem.url?
      roomItem.url:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'"></el-image>
    </div>
    <div class="room-info">
      <div class="room-info-li">
        <span>主播昵称</span>
        <span style="color: #1890ff;font-style: italic">{{ roomItem.anchor.nickname?roomItem.anchor.nickname:"未命名用户" }}</span>
      </div>
      <div class="room-info-li">
        <span>房间号</span>
        <div>
          <el-check-tag checked>{{ roomItem.roomNumber }}</el-check-tag>
        </div>
      </div>
      <div class="room-info-li">
        <span>房间状态</span>
        <el-tag v-if="boo==1" :disable-transitions="true" :hit="true" type="danger">封禁</el-tag>
        <el-tag v-else :hit="true" :disable-transitions="true" type="success">正常</el-tag>
      </div>
      <div class="room-info-li">
        <span>操作</span>
        <div style="width: 100%;display: flex;flex-direction: row;justify-content: space-around">
          <el-switch
              v-model="boo"
              inline-prompt
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              active-text="正常"
              inactive-text="封禁"
              :active-value="0"
              :inactive-value="1"
              :change="changeStatus(roomItem,boo)"
          />
          <div>
            <update-live-room :room-msg="roomItem"></update-live-room>
          </div>
          <div>
            <el-button type="danger" @click="deleteItem(roomItem)" :icon="Delete"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.live-room-item {
  width: 100%;
  height: 100px;
  display: flex;
  border: #1890ff 1px solid;
  margin: 0.45% 0;
  align-items: center;

  .room-img {
    display: flex;
    height: 100%;
    flex: 1;
  }

  .room-info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    flex: 8;

    .room-info-li {
      display: flex;
      flex-direction: column;
      flex: 1;
      border: #1890ff 1px solid;
      border-left: none;
      height: 100%;
      justify-content: space-around;
      align-items: center;
    }
  }
}
</style>